<template>
  <div class="search-box">
    <div class="search-box-wrapper" @click="onSearchBoxClick">
      <van-icon name="search" class="search" size="16px" color="#858c96"/>
      <input
        class="search-box-input"
        :focus="focus"
        :disabled="disabled"
        :maxlength="limit"
        :placeholder="hotSearch.length === 0 ? '搜索关键字' : hotSearch"
        placeholder-style="color: #adb4be"
        v-model="searchWord"
        @input="onChange"
        confirm-type="search"
        @confirm="onSearchConfirm"
        @blur="onBlur"
      />
      <van-icon name="clear" class="clear" size="16px" color="#858c96"
                @click="onClearClick"
                v-if="searchWord.length > 0"
      />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'SearchBox',
    props: {
      focus: {
        type: Boolean, default: true
      },
      disabled: {
        type: Boolean, default: true
      },
      limit: {
        type: Number, default: 50
      },
      hotSearch: {
        type: String, default: ''
      }
    },
    data () {
      return {
        searchWord: ''
      }
    },
    methods: {
      onSearchBoxClick () {
        this.$emit('onClick')
      },
      onClearClick () {
        this.searchWord = ''
        this.$emit('onClear')
      },
      onChange (e) {
        console.log(e)
        const {value} = e.mp.detail
        this.$emit('onChange', value)
      },
      onSearchConfirm (e) {
        console.log(e)
        const {value} = e.mp.detail
        this.$emit('onConfirm', value)
      },
      onBlur (e) {
        const {value} = e.mp.detail
        this.$emit('onBlur', value)
      },
      setValue (value) {
        this.searchWord = value
      },
      getValue () {
        return this.searchWord
      }
    }
  }
</script>

<style scoped lang="scss">
  .search-box {
    padding: 15px 15.5px;

    .search-box-wrapper {
      background: #EFEFEF;
      border-radius: 20px;
      padding: 12px;
      height: 38px;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .search-box-input {
        flex: 1;
        margin: 0 8px;
      }

      .search, .clear {
        display: flex;
        align-items: center;
        height: 100%;
      }
    }
  }
</style>
